<link rel="stylesheet" type="text/css" media="screen" href="<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH."css/datepicker.css"; ?>" />
<link href="<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH."css/facebox/facebox.css"; ?>" media="screen" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH."js/jquery.js";?>"></script>
<script type="text/javascript" src="<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH."js/date.js"; ?>"></script>
<script type="text/javascript" src="<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH."js/jquery.datePicker.js"; ?>"></script>
<script type="text/javascript" src="<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH."js/facebox.js"; ?>"></script>
<script type="text/javascript" src="<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH."js/application.js";?>"></script>
<script>
//script for datepicker
Date.firstDayOfWeek = 0;
Date.format = 'mm/dd/yyyy';
$(document).ready(function() {
	$('a[rel*=facebox]').facebox({
		opacity: 0.5,
		closeImage: "<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH."css/facebox/closelabel.gif"; ?>",
		loadingImage: "<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH."css/facebox/loading.gif"; ?>"
	});
	$('.date_pick').datePicker();
	$('.StartDate').bind(
			'dpClosed',
			function(e, selectedDates)
			{
				var index = $('.StartDate').index(this);
				var d = selectedDates[0];
				if (d) {
					d = new Date(d);
					$('.EndDate:eq('+index+')').dpSetStartDate(d.addDays(1).asString());
				}
			}
	);
	$('.EndDate').bind(
		'dpClosed',
		function(e, selectedDates)
		{
			var index = $('.EndDate').index(this);
			var d = selectedDates[0];
			if (d) {
				d = new Date(d);
				$('.StartDate:eq('+index+')').dpSetEndDate(d.addDays(-1).asString());
			}
		}
	);
});

var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var months_index = new Array("01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12");
var original_blocked_dates = "<?php echo $Unit->blocked_dates;?>".split(",");
var confirmed_dates = "<?php echo $confirmed_dates;?>".split(",");
var unconfirmed_dates = "<?php echo $unconfirmed_dates;?>".split(",");

function fill_table(month,month_length) {
	var day=1
	//var month_index = 
	// outputs 3 months in a table row
	var per_row = 3
	var month_number = months.indexOf(month) //< 10 ? "0"+months.indexOf(month) : months.indexOf(month);
	var class_name = "";
	
	if(month_number % per_row == 0 && month_number != 0) document.write("</td></tr><tr><td valign=\"top\">")
	else document.write("</td><td valign=\"top\">")
	
	document.write("<TABLE CELLSPACING=\"0\" CELLPADDING=\"0\" width=\"100%\"><TR>")
	document.write("<TD COLSPAN=7 ALIGN=center class=\"MonthHeader\"><B>"+month+"   "+year+"</B><TR class=\"DayTitle\">")
	day_title("Sun")
	day_title("Mon")
	day_title("Tue")
	day_title("Wed")
	day_title("Thu")
	day_title("Fri")
	day_title("Sat")
	document.write("</TR><TR>")

	for (var i=1;i<start_day;i++) {
		document.write("<TD>")
	}
	for (var i=start_day;i<8;i++) {
		var date = day+"/"+month+"/"+year;
		month_index = month_number+1; // TODO: swap the name month_index and month_number
		var standard_date = (month_index < 10 ? "0"+month_index : month_index)+"/"+(day < 10 ? "0"+day : day)+"/"+year;
		var class_name = unconfirmed_dates.inArray(standard_date) ? "ConfirmedNot" : "";
		var class_name = confirmed_dates.inArray(standard_date) ? "Confirmed" : "";
		/*if( confirmed_dates.inArray(standard_date) ){
			if( flag_confirmed == 0 ){
				class_name = "Confirmed"; // change to StartConfirmed
				flag_confirmed = 1;
			}
			else class_name = "Confirmed";
		}
		else {
			class_name = "";
			flag_confirmed = 0;
		}*/
		
		//var confirmed_class_name = 
		var span_class_name = original_blocked_dates.inArray(date) ? "Blocked" : "UnBlocked";
		document.write("<TD ALIGN=center class=\""+ class_name +"\"><span class=\""+ span_class_name +"\" id=\"date_"+date+"\">"+day+"</span></TD>")
		day++
	}
	document.write("<TR>")
	while (day <= month_length) {
		for (var i=1;i<=7 && day<=month_length;i++) {
			var date = (day < 10 ? "0"+day : day)+"/"+month+"/"+year;
			month_index = month_number+1; // TODO: swap the name month_index and month_number
			var standard_date = (month_index < 10 ? "0"+month_index : month_index)+"/"+(day < 10 ? "0"+day : day)+"/"+year;
			var class_name = unconfirmed_dates.inArray(standard_date) ? "ConfirmedNot" : "";
			var class_name = confirmed_dates.inArray(standard_date) ? "Confirmed" : "";
			/*if( confirmed_dates.inArray(standard_date) ){
				if( flag_confirmed == 0 ){
					class_name = "Confirmed"; // change to StartConfirmed
					flag_confirmed = 1;
				}
				else class_name = "Confirmed";
			}
			else {
				class_name = "";
				flag_confirmed = 0;
			}*/
			/*var class_name = confirmed_dates.inArray(standard_date) ? "Confirmed" : "";	
			if()*/
			
			var span_class_name = original_blocked_dates.inArray(date) ? "Blocked" : "UnBlocked";
			document.write("<TD ALIGN=center class=\""+ class_name +"\"><span class=\""+ span_class_name +"\" id=\"date_"+date+"\">"+day+"</span></TD>")
			day++
		}
		document.write("</TR><TR>")
		start_day=i
	}
	document.write("</TR></TABLE>")
}
function day_title(day_name){
	document.write("<TD ALIGN=center WIDTH=35>"+day_name+"</TD>")
}
function get_months(){
	today= new Date("January 1, "+year)
	start_day = today.getDay() + 1 // retrieves the day(sun, mon, etc...) of the first day of that year
	
	fill_table("January",31)
	if (((year % 4)==0) && ((year % 100)!=0) || ((year % 400)==0))
	{ fill_table("February", 29); }
	else { fill_table("February", 28); }
	fill_table("March",31)
	fill_table("April",30)
	fill_table("May",31)
	fill_table("June",30)
	fill_table("July",31)
	fill_table("August",31)
	fill_table("September",30)
	fill_table("October",31)
	fill_table("November",30)
	fill_table("December",31)
	year = year+1;
}
function select_year(option){
	if(option == 1) cur_year += 1;
	else cur_year -= 1;
	if(cur_year > (year-1)) cur_year = year-1;
	else if(cur_year < start_year) cur_year = start_year;
	$("#year_"+(start_year+0)+", #year_"+(start_year+1)+", #year_"+(start_year+2)+", #year_"+(start_year+3)).css("display", "none");
	$("#year_"+cur_year).css("display", "block");
	$("#CurYear").text(cur_year);
}
function get_availability(start_date, end_date){
	$('#loader').css("display", "inline");
	$.post("<?php echo COMPONENT_PATH."functions/get_availability.php";?>", {start_date: start_date, end_date: end_date, id: "<?php echo $Unit->id;?>"}, function(data){
		$('#loader').css("display", "none");
		if(data.error == 1){
			$("#not_available").css("display", "inline");
			$("#available").css("display", "none");
		}
		else{
			$("#not_available").css("display", "none");
			$("#available").css("display", "inline");
		}
		$("#availabilty").text(data.msg);
	}, "json");
}
</script>
<div id="ComponentWrapper">
	<div>
		<div class="LeftColumn"><a href="?option=<?php echo COMPONENT_NAME;?>"><< Back to list</a></div>
		<div class="RightColumn" id="PropertyId">Property Number: <?php echo $Unit->id;?></div>
	</div>
	<div id="UnitInfo">
		<table border="0">
		  <tr>
		    <td valign="middle"><img alt="Bedrooms" src="<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH;?>images/bed_icon.jpg"><span class="UnitInfo"><?php echo ($Unit->bedrooms ? $Unit->bedrooms : 0) ;?></span></td>
		    <td><img alt="Sleeps" src="<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH;?>images/sleep_icon.jpg"><span class="UnitInfo"><?php echo ($Unit->maximum_occupancy ? $Unit->maximum_occupancy : 0);?></span></td>
		    <td><img alt="Bathrooms" src="<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH;?>images/bathrooms.jpg"><span class="UnitInfo"><?php echo ($Unit->bathrooms ? $Unit->bathrooms : 0);?></span></td>
		  </tr>
		</table>
	</div>
	<h1 class="Main"><?php echo $Unit->title;?></h1>
	<div class="UnitContent"><?php echo $Unit->summary;?></div>
	<table width="100%" id="images_table">
		<tr>
			<td colspan="5"><img src="<?php echo ADMIN_COMPONENT_PATH.$Images[0]->photourl;?>" alt="" /></td>
		</tr>
		<tr>
			<td width="20%"><?php if(isset($Images[1])){?><a href="<?php echo ADMIN_COMPONENT_PATH.$Images[1]->photourl;?>" rel="facebox"><img class="LinkImg" src="<?php echo ADMIN_COMPONENT_PATH.$Images[1]->thumbnailurl;?>" alt="" /></a><?php }?></td>
			<td width="20%"><?php if(isset($Images[2])){?><a href="<?php echo ADMIN_COMPONENT_PATH.$Images[2]->photourl;?>" rel="facebox"><img class="LinkImg" src="<?php echo ADMIN_COMPONENT_PATH.$Images[2]->thumbnailurl;?>" alt="" /></a><?php }?></td>
			<td width="20%"><?php if(isset($Images[3])){?><a href="<?php echo ADMIN_COMPONENT_PATH.$Images[3]->photourl;?>" rel="facebox"><img class="LinkImg" src="<?php echo ADMIN_COMPONENT_PATH.$Images[3]->thumbnailurl;?>" alt="" /></a><?php }?></td>
			<td width="20%"><?php if(isset($Images[4])){?><a href="<?php echo ADMIN_COMPONENT_PATH.$Images[4]->photourl;?>" rel="facebox"><img class="LinkImg" src="<?php echo ADMIN_COMPONENT_PATH.$Images[4]->thumbnailurl;?>" alt="" /></a><?php }?></td>
			<td width="20%"><?php if(isset($Images[5])){?><a href="<?php echo ADMIN_COMPONENT_PATH.$Images[5]->photourl;?>" rel="facebox"><img class="LinkImg" src="<?php echo ADMIN_COMPONENT_PATH.$Images[5]->thumbnailurl;?>" alt="" /></a><?php }?></td>
		</tr>
		<?php if(isset($Images[6])){?>
		<tr>
			<td width="20%"><?php if(isset($Images[6])){?><a href="<?php echo ADMIN_COMPONENT_PATH.$Images[6]->photourl;?>" rel="facebox"><img class="LinkImg" src="<?php echo ADMIN_COMPONENT_PATH.$Images[6]->thumbnailurl;?>" alt="" /></a><?php }?></td>
			<td width="20%"><?php if(isset($Images[7])){?><a href="<?php echo ADMIN_COMPONENT_PATH.$Images[7]->photourl;?>" rel="facebox"><img class="LinkImg" src="<?php echo ADMIN_COMPONENT_PATH.$Images[7]->thumbnailurl;?>" alt="" /></a><?php }?></td>
			<td width="20%"><?php if(isset($Images[8])){?><a href="<?php echo ADMIN_COMPONENT_PATH.$Images[8]->photourl;?>" rel="facebox"><img class="LinkImg" src="<?php echo ADMIN_COMPONENT_PATH.$Images[8]->thumbnailurl;?>" alt="" /></a><?php }?></td>
			<td width="20%"><?php if(isset($Images[9])){?><a href="<?php echo ADMIN_COMPONENT_PATH.$Images[9]->photourl;?>" rel="facebox"><img class="LinkImg" src="<?php echo ADMIN_COMPONENT_PATH.$Images[9]->thumbnailurl;?>" alt="" /></a><?php }?></td>
			<td width="20%"><?php if(isset($Images[10])){?><a href="<?php echo ADMIN_COMPONENT_PATH.$Images[10]->photourl;?>" rel="facebox"><img class="LinkImg" src="<?php echo ADMIN_COMPONENT_PATH.$Images[10]->thumbnailurl;?>" alt="" /></a><?php }?></td>
		</tr>
		<?php }?>		
	</table>
	<h1 class="Main"><?php echo $Unit->name;?> description</h1>
	<div class="UnitContent"><?php echo $Unit->description;?></div>
	<h1 class="Main">Amenities</h1>
	<div class="UnitContent">
		<table width="100%">
			<tr>
			<?php $PerRow = 3;?>
			<?php foreach ($Amenities as $Key=>$Amenity){?>
				<?php if( $Key != 0 && ($Key%$PerRow == 0) ){?>
					</tr><tr>
				<?php }else{?>
					<td width="33%"> - <?php echo $Amenity;?></td>
				<?php }?>			
			<?php }?>
			</tr>
		</table>		
	</div>
	<h1 class="Sub">Notes and Additional Information</h1>
	<h1 class="Main">Villa Rates</h1>
	<div class="UnitContent">
		<table width="100%" class="CenterAlign">
			<tr>
				<td colspan="3" align="center"><b>Period</b></td>
				<td align="center"><b>Price</b></td>
			</tr>
			<?php foreach ($Prices as $Price){?>
				<?php if( $Price->startdate != "1970-01-01" || $Price->enddate != "1970-01-01"){?>
			<tr>
				<td width="25%" align="center"><?php echo get_string_from_date($Price->startdate);?></td>
				<td width="10%" align="center"> - </td>
				<td width="25%" align="center"><?php echo get_string_from_date($Price->enddate);?></td>
				<td align="center"><?php echo $Price->price;?></td>
			</tr>
				<?php }?>
			<?php }?>
		</table>
	</div>
	<h1 class="Main">Reserve this home</h1>
	<div class="UnitContent">
		<table width="100%">
			<tr>
				<td width="18%">Arrival Date:</td>
				<td width="180px"><input type="text" class="date_pick StartDate" name="StartDate" id="StartDate" /></td>
				<td rowspan="2" valign="middle" width="110px">
					<input type="button" value="Reserve Now" />
				</td>
				<td rowspan="2">
					<span id="availabilty"></span> 
					<img id="loader" style="display: none;" alt="please wait..." src="<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH."images/loading-icon.gif"?>">
					<img id="available" style="display: none;" alt="available" src="<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH."images/tick.png"?>">
					<img id="not_available" style="display: none;" alt="not available" src="<?php echo ADMIN_COMPONENT_PATH.COMPONENT_PATH."images/cross.png"?>">
				</td>
			</tr>
			<tr>
				<td>Departure Date:</td>
				<td><input type="text" class="date_pick EndDate" name="EndDate" id="EndDate" onchange="get_availability( $('#StartDate').val(), $('#EndDate').val() )" /></td>
			</tr>
		</table>
	</div>
	<div id="calender">
		<SCRIPT type="text/javascript" language="JavaScript">
			today = new Date();
			var year = today.getYear(); // changes as years are printed
			if (year < 2000) year = year + 1900; // Y2K Fix, Isaac Powell "http://onyx.idbsu.edu/~ipowell"
			var start_year = year; // the first year (constant)
			var cur_year = year; // the current selected year
			var flag_confirmed = 0;
	
			document.write("<div id=\"CalenderWrapper\"><div id=\"CalenderNavigation\"><a href=\"javascript:void(0);\" onclick=\"select_year(-1)\"><img src=\"<?php echo COMPONENT_PATH.'images/year_less.jpg'?>\" /></a>")
			document.write("<span id=\"CurYear\">"+ cur_year +"</span>");
			document.write("<a href=\"javascript:void(0);\" onclick=\"select_year(1)\"><img src=\"<?php echo COMPONENT_PATH.'images/year_more.jpg'?>\" /></a></div>")
			for(var i=0; i<4; i++){
				document.write("<div id=\"year_"+(start_year+i)+"\" style=\"display:" + (i==0 ? 'block':'none') + "\"><table width=\"100%\"><tr>");
				get_months();
				document.write("</td></tr></table></div>");
			}
			document.write("</div>");
		</SCRIPT>
	</div>
	<h1 class="Main">Send Inquiry About This Vacation Villa</h1>
	<div class="UnitContent">
		<form action="" method="post" name="EnquiryForm">
		<table width="100%" border="0">
		  <tr>
		    <td width="40%" class="RightAlign">Property Address:</td>
		    <td class="LeftAlign"><b>Property Number: <?php echo $Unit->id;?></b></td>
		  </tr>
		  <tr>
		    <td>&nbsp;</td>
		    <td></td>
		  </tr>
		  <tr>
		    <td class="RightAlign">Name:</td>
		    <td class="LeftAlign"><input type="text" size="45" name="enquiry[name]" /></td>
		  </tr>
		  <tr>
		    <td class="RightAlign">E-mail Address:</td>
		    <td class="LeftAlign"><input type="text" size="45" name="enquiry[email]" /></td>
		  </tr>
		  <tr>
		    <td class="RightAlign">Telephone Number:</td>
		    <td class="LeftAlign"><input type="text" size="45" name="enquiry[telephone]" /></td>
		  </tr>
		  <tr>
		    <td>&nbsp;</td>
		    <td></td>
		  </tr>
		  <tr>
		    <td class="RightAlign">Arrival Date:</td>
		    <td class="LeftAlign">
		    	<select name="enquiry[startdate][month]">
		        	<option value="01">January</option>
		        	<option value="02">February</option>
		        	<option value="03">March</option>
		        	<option value="04">April</option>
		        	<option value="05">May</option>
		        	<option value="06">June</option>
		        	<option value="07">July</option>
		        	<option value="08">August</option>
		        	<option value="09">September</option>
		        	<option value="10">October</option>
		        	<option value="11">November</option>
		        	<option value="12">December</option>
		        </select>
		    	<select name="enquiry[startdate][date]">
		        	<option value="01">01</option>
		        	<option value="02">02</option>
		        	<option value="03">03</option>
		        	<option value="04">04</option>
		        	<option value="05">05</option>
		        	<option value="06">06</option>
		        	<option value="07">07</option>
		        	<option value="08">08</option>
		        	<option value="09">09</option>
		        	<option value="10">10</option>
		        	<option value="11">11</option>
		        	<option value="12">12</option>
		        	<option value="13">13</option>
		        	<option value="14">14</option>
		        	<option value="15">15</option>
		        	<option value="16">16</option>
		        	<option value="17">17</option>
		        	<option value="18">18</option>
		        	<option value="19">19</option>
		        	<option value="20">20</option>
		        	<option value="21">21</option>
		        	<option value="22">22</option>
		        	<option value="23">23</option>
		        	<option value="24">24</option>
		        	<option value="25">25</option>
		        	<option value="26">26</option>
		        	<option value="27">27</option>
		        	<option value="28">28</option>
		        	<option value="29">29</option>
		        	<option value="30">30</option>
		        	<option value="31">31</option>

		        </select>
		    	<select name="enquiry[startdate][year]">
		        	<option value="2009">2009</option>
		        	<option value="2010">2010</option>
		        	<option value="2011">2011</option>
		        </select>
		    </td>
		  </tr>
		  <tr>
		    <td class="RightAlign">Departure Date:</td>
		    <td class="LeftAlign">
		    	<select name="enquiry[enddate][month]">
		        	<option value="01">January</option>
		        	<option value="02">February</option>
		        	<option value="03">March</option>
		        	<option value="04">April</option>
		        	<option value="05">May</option>
		        	<option value="06">June</option>
		        	<option value="07">July</option>
		        	<option value="08">August</option>
		        	<option value="09">September</option>
		        	<option value="10">October</option>
		        	<option value="11">November</option>
		        	<option value="12">December</option>
		        </select>
		    	<select name="enquiry[enddate][date]">
		        	<option value="01">01</option>
		        	<option value="02">02</option>
		        	<option value="03">03</option>
		        	<option value="04">04</option>
		        	<option value="05">05</option>
		        	<option value="06">06</option>
		        	<option value="07">07</option>
		        	<option value="08">08</option>
		        	<option value="09">09</option>
		        	<option value="10">10</option>
		        	<option value="11">11</option>
		        	<option value="12">12</option>
		        	<option value="13">13</option>
		        	<option value="14">14</option>
		        	<option value="15">15</option>
		        	<option value="16">16</option>
		        	<option value="17">17</option>
		        	<option value="18">18</option>
		        	<option value="19">19</option>
		        	<option value="20">20</option>
		        	<option value="21">21</option>
		        	<option value="22">22</option>
		        	<option value="23">23</option>
		        	<option value="24">24</option>
		        	<option value="25">25</option>
		        	<option value="26">26</option>
		        	<option value="27">27</option>
		        	<option value="28">28</option>
		        	<option value="29">29</option>
		        	<option value="30">30</option>
		        	<option value="31">31</option>
		        </select>
		    	<select name="enquiry[enddate][year]">
		        	<option value="2009">2009</option>
		        	<option value="2010">2010</option>
		        	<option value="2011">2011</option>
		        </select>
		    </td>
		  </tr>
		  <tr>
		    <td>&nbsp;</td>
		    <td></td>
		  </tr>
		  <tr>
		    <td class="RightAlign">Adults:</td>
		    <td class="LeftAlign">
		    	<select name="enquiry[adults]">
		        	<option value="0">0</option>
		        	<option value="1">1</option>
		        	<option value="2">2</option>
		        	<option value="3">3</option>
		        	<option value="4">4</option>
		        	<option value="5">5</option>
		        	<option value="6">6</option>
		        </select>
		    </td>
		  </tr>
		  <tr>
		    <td class="RightAlign">Children:</td>
		    <td class="LeftAlign">
		    	<select name="enquiry[children]">
		        	<option value="0">0</option>
		        	<option value="1">1</option>
		        	<option value="2">2</option>
		        	<option value="3">3</option>
		        	<option value="4">4</option>
		        	<option value="5">5</option>
		        	<option value="6">6</option>
		        </select>
		    </td>
		  </tr>
		  <tr>
		    <td>&nbsp;</td>
		    <td></td>
		  </tr>
		  <tr>
		    <td class="RightAlign">Comments:</td>
		    <td class="LeftAlign"><textarea rows="5" cols="50" name="enquiry[comments]"></textarea></td>
		  </tr>
		  <tr>
		    <td>&nbsp;</td>
		    <td></td>
		  </tr>
		  <tr>
		    <td colspan="2">Please Enter the letters into the box below.</td>
		  </tr>
		  <tr>
		    <td class="RightAlign"><img src="<?php echo COMPONENT_PATH.'functions/';?>CaptchaSecurityImages.php?width=100&height=40&characters=5" />&nbsp;&nbsp;</td>
		    <td class="LeftAlign"><input id="security_code" name="security_code" type="text" /></td>
		  </tr>
		  <tr>
		    <td>&nbsp;</td>
		    <td></td>
		  </tr>
		  <tr>
		    <td></td>
		    <td class="LeftAlign"><input type="submit" name="Send Enquiry" /></td>
		  </tr>
		</table>
		</form>
	</div>
</div>